<template>
  <span
    :class="[
      type === 'divider' && 'bc-action-buttons-space-divider',
      type === 'empty' && 'bc-action-buttons-space-empty',
      type === 'full' && 'bc-action-buttons-space-full',
      $attrs.class,
    ]"
    v-bind="$attrs"
  />
</template>

<script setup>
defineProps({
  type: {
    type: String,
    default: '',
  },
});
</script>

<style lang="less">
.bc-action-buttons-space {
  &-empty {
    display: inline-block;
    width: var(--size-cell-gap);
  }

  &-divider {
    position: relative;
    display: inline-block;
    height: 1em;
    margin: 0 calc(var(--size-cell-gap) / 2);
    vertical-align: middle;
    border-left: 1px solid rgba(5, 5, 5, 0.06);
  }

  &-full {
    display: inline-block;
    flex: 1;
  }
}
</style>
